<script>
import TitleA from "@/comps/comm/TitleA.vue";
import EzData from "@/comps/EzData.vue";
import formBuilder from "@/comps/form/formBuilder";
import apiSubject from "@/pages/v1/study/Subject/js/apiSubject";
import apiGrade from "@/pages/v1/study/Grade/js/apiGrade";
import apiKnowledge from "@/pages/v1/study/Knowledge/js/apiKnowledge";
import apiReadWrite from "@/pages/v1/study/ReadWrite/js/apiReadWrite";
import apiWordTestPaper from "@/pages/v1/study/WordTestPaper/js/apiWordTestPaper";

export default {
  components: {EzData, TitleA},
  data() {
    let testConditionConfig = formBuilder()
    testConditionConfig.addSelect("subjectId","科目",3).setApi(apiSubject.urlChoice)
    testConditionConfig.addSelect("gradeId","年级",3).setApi(apiGrade.urlChoice)
    testConditionConfig.addBlank("_g","",3)
    return{
      testConditionConfig,
      testCondition:{},
      knowledge:[],
      rwToSelect:[],
      rwIdSelected:[],
      rwSelected:[],
      title:"",
    }
  },
  mounted() {
  },
  methods: {
    getKnowledgeList(){
      apiKnowledge.findBy({_where:this.testCondition,limit:100,page:1},(data,query)=>{
        this.knowledge = data
      })
    },
    getReadWrite(){
      apiReadWrite.findBy({_where:{knowledgeId:this.knowledge[0].id},limit:100,page:1},(data,query)=>{
        this.rwToSelect = data
      })
    },
    getReadWriteByIds(){
      apiReadWrite.findBy({_where:{id__in:this.rwIdSelected},limit:1000,page:1},(data,query)=>{
        this.rwSelected = data
      })
    },
    createPaper(){
      apiWordTestPaper.save({name:this.title,ids:this.rwIdSelected},res=>{
        console.log(res)
        this.$toast.success(res.message)
      })
    }
  },
  watch:{
    rwIdSelected(){
      this.getReadWriteByIds()
    }
  }
}
</script>

<template>
<div class="mar5">
  <mu-card class="bcf pad5">
    <title-a>读写自测</title-a>
  </mu-card>
  <mu-card class="mart5 pad5">
    <title-a>数据筛选</title-a>
    <EzData v-model="testCondition" :config="testConditionConfig">
      <div slot="_g">
        <mu-button color="primary" @click="getKnowledgeList()">筛选</mu-button>
      </div>
    </EzData>
    <div class="pad5 flex-r flex-fill bc13">
      <div style="width: 360px;" class="bcf pad5">
        <title-a>知识点</title-a>
        <div v-for="(item,index) in knowledge" :key="index">
          <mu-button flat full-width @click="getReadWrite">{{item.name}} <mu-icon value="search" right></mu-icon></mu-button>
        </div>
      </div>
      <div class="flex1 flex-r flex-start flex-fill" style="height: 500px;overflow-y: scroll">
        <div class="flex1 pad5 bcf marl5 marr5">
          <div class="marb10"><title-a>待选</title-a></div>
          <div class="flrc bdbda" v-for="(item,index) in rwToSelect" :key="index">
            <div style="width: 60px"><mu-checkbox :value="item.id" v-model="rwIdSelected"></mu-checkbox></div>
            <div class="flex1">{{item.read}}</div>
            <div class="flex1">{{item.write}}</div>
            <div class="flex3">{{item.sense}}</div>
          </div>
        </div>
        <div class="flex1 pad5 bcf">
          <div class="marb10 flrc">
            <title-a class="flex1">已选</title-a>
            <div class="flex1 tar">共计：{{rwSelected.length}}项</div>
          </div>
          <div class="flrc bdbda" v-for="(item,index) in rwSelected" :key="index">
            <div style="width: 60px"><mu-checkbox :value="item.id" v-model="rwIdSelected"></mu-checkbox></div>
            <div class="flex1">{{item.read}}</div>
            <div class="flex1">{{item.write}}</div>
            <div class="flex3">{{item.sense}}</div>
          </div>
        </div>
      </div>
    </div>

<!--    数据提交-->
    <div class="pad5">
      <title-a>创建测试</title-a>
      <mu-row>
        <mu-col :span="12">
          <mu-text-field v-model="title" full-width label="测试标题"></mu-text-field>
        </mu-col>
        <mu-col :span="12">
          <mu-button color="primary" @click="createPaper">创建</mu-button>
        </mu-col>
      </mu-row>
    </div>
  </mu-card>
</div>
</template>

<style scoped>
</style>